<template>
  <!-- 查询 -->
  <el-card>
    <el-input placeholder="请输入会议名称" v-model="Search.AppointmentsName" style="width: 200px;margin-right: 10px;"></el-input>
    <el-select v-model="Search.MeetStatus" placeholder="会议状态" style="width: 150px;margin-right: 10px;">
      <el-option label="全部" value="" />
      <el-option label="待审批" value="10" />
      <el-option label="已通过" value="11" />
      <el-option label="已驳回" value="12" />
    </el-select>
    <el-button type="primary" @click="getMeetProcessList">搜索</el-button>
    <el-button @click="ResetSearch">重置</el-button>
  </el-card>

  <br>

  <el-card>
    <!-- 表格 -->
    <el-table :data="tableData" style="width: 100%">
      <el-table-column fixed prop="MeetProcessId" label="编号" width="80" />
      <el-table-column prop="AppointmentsId" label="预约编号" width="100" />
      <el-table-column prop="AppointmentsName" label="会议名称" width="150" />
      <el-table-column prop="MeetMain" label="会议主题" width="150" />
      <el-table-column prop="MeetPeople" label="会议主持人" width="120" />
      <el-table-column prop="CreateTime" label="会议日期" width="120">
        <template #default="scope">
          {{ moment(scope.row.CreateTime).format('YYYY-MM-DD') }}
        </template>
      </el-table-column>
      <el-table-column prop="StartTime" label="开始时间" width="120">
        <template #default="scope">
          {{ moment(scope.row.StartTime).format('HH:mm') }}
        </template>
      </el-table-column>
      <el-table-column prop="EndTime" label="结束时间" width="120">
        <template #default="scope">
          {{ moment(scope.row.EndTime).format('HH:mm') }}
        </template>
      </el-table-column>
      <el-table-column prop="MeetStatus" label="状态" width="100">
        <template #default="scope">
          <el-tag v-if="scope.row.MeetStatus == 10" type="warning">待审批</el-tag>
          <el-tag v-else-if="scope.row.MeetStatus == 11" type="success">已通过</el-tag>
          <el-tag v-else-if="scope.row.MeetStatus == 12" type="danger">已驳回</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="MeetApprover" label="审批人" width="100" />
      <el-table-column fixed="right" label="操作" width="180">
        <template #default="scope">
          <el-button link type="primary" size="small" @click="viewDetails(scope.row)">查看详情</el-button>
          <el-button v-if="scope.row.MeetStatus == 10" link type="primary" size="small" @click="openApproveDialog(scope.row)">审批</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-card>

  <!-- 分页 -->
  <tr>
    <td>
      <el-pagination
        v-model:current-page="Search.PageIndex"
        v-model:page-size="Search.PageSize"
        :page-sizes="[10, 20, 30, 50]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="Search.TotalCount"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </td>
  </tr>

  <!-- 会议详情对话框 -->
  <el-dialog v-model="dialogMeetDetailsVisible" title="会议详情" width="700">
    <el-descriptions :column="2" border>
      <el-descriptions-item label="会议名称">{{ meetDetails.AppointmentsName }}</el-descriptions-item>
      <el-descriptions-item label="会议主题">{{ meetDetails.MeetMain }}</el-descriptions-item>
      <el-descriptions-item label="会议主持人">{{ meetDetails.MeetPeople }}</el-descriptions-item>
      <el-descriptions-item label="会议日期">{{ meetDetails.CreateTime ? moment(meetDetails.CreateTime).format('YYYY-MM-DD') : '' }}</el-descriptions-item>
      <el-descriptions-item label="开始时间">{{ meetDetails.StartTime ? moment(meetDetails.StartTime).format('HH:mm') : '' }}</el-descriptions-item>
      <el-descriptions-item label="结束时间">{{ meetDetails.EndTime ? moment(meetDetails.EndTime).format('HH:mm') : '' }}</el-descriptions-item>
      <el-descriptions-item label="参与人">{{ meetDetails.JoinPeople }}</el-descriptions-item>
      <el-descriptions-item label="会议内容" :span="2">{{ meetDetails.MeetDesc }}</el-descriptions-item>
    </el-descriptions>
  </el-dialog>

  <!-- 审批对话框 -->
  <el-dialog v-model="dialogApproveVisible" title="会议审批" width="500">
    <div class="approve-dialog-content">
      <p>会议名称：{{ currentMeeting.AppointmentsName }}</p>
      <p>会议主题：{{ currentMeeting.MeetMain }}</p>
      <p>会议主持人：{{ currentMeeting.MeetPeople }}</p>
      <p>会议日期：{{ currentMeeting.CreateTime ? moment(currentMeeting.CreateTime).format('YYYY-MM-DD') : '' }}</p>
      <p>会议时间：{{ currentMeeting.StartTime ? moment(currentMeeting.StartTime).format('HH:mm') : '' }} - {{ currentMeeting.EndTime ? moment(currentMeeting.EndTime).format('HH:mm') : '' }}</p>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogApproveVisible = false">取消</el-button>
        <el-button type="success" @click="approveProcess(currentMeeting.MeetProcessId, 11)">通过</el-button>
        <el-button type="danger" @click="approveProcess(currentMeeting.MeetProcessId, 12)">驳回</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted } from 'vue';
import { GetMeetProcessList } from '@/api/Readapi';
import { ApproveMeetProcess } from '@/api/Writeapi';
import moment from 'moment';
import { ElMessageBox, ElMessage } from 'element-plus';

// 接口返回数据
interface ApiResponse {
  code: number
  msg: string
  data: any
}

// 挂载
onMounted(() => {
  // 获取本地存储的用户名
  const rememberedUser = localStorage.getItem('rememberedUser');
  if (rememberedUser) {
    try {
      const user = JSON.parse(rememberedUser);
      Search.LoginName = user.username;
    } catch (error) {
      console.error('解析用户信息失败:', error);
    }
  }
  getMeetProcessList();
})

// 表格数据
const tableData = ref([]);

// 搜索参数
const Search = reactive({
  PageIndex: 1,
  PageSize: 10,
  AppointmentsName: '',
  MeetStatus: '',
  LoginName: '',
  TotalCount: 0,
  TotalPage: 0
})

// 重置按钮
const ResetSearch = () => {
  Search.AppointmentsName = '';
  Search.MeetStatus = '';
  getMeetProcessList();
}

// 获取会议审批列表
const getMeetProcessList = async () => {
  const res = await GetMeetProcessList(Search) as unknown as ApiResponse;
  if (res.code == 200) {
    tableData.value = res.data.data;
    Search.TotalCount = res.data.TotalCount;
    Search.TotalPage = res.data.TotalPage;
  } else {
    ElMessage.error(res.msg || '获取数据失败');
  }
}

// 分页大小变化
const handleSizeChange = (val: number) => {
  Search.PageSize = val;
  getMeetProcessList();
}

// 当前页变化
const handleCurrentChange = (val: number) => {
  Search.PageIndex = val;
  getMeetProcessList();
}

// 会议详情
const dialogMeetDetailsVisible = ref(false);
const meetDetails = reactive({
  MeetProcessId: 0,
  AppointmentsId: 0,
  AppointmentsName: '',
  AppointmentsTemplate: 0,
  MeetMain: '',
  MeetManagerId: 0,
  MeetPeople: '',
  CreateTime: '',
  StartTime: '',
  EndTime: '',
  JoinPeople: '',
  MeetDesc: '',
  MeetSign: false,
  MeetPassphrase: false,
  MeetMessage: false,
  MeetRemote: false,
  MeetStatus: 0,
  MeetApprover: ''
});

// 查看详情
const viewDetails = (row: any) => {
  Object.assign(meetDetails, row);
  dialogMeetDetailsVisible.value = true;
}

// 审批对话框
const dialogApproveVisible = ref(false);
const currentMeeting = reactive({
  MeetProcessId: 0,
  AppointmentsName: '',
  MeetMain: '',
  MeetPeople: '',
  CreateTime: '',
  StartTime: '',
  EndTime: ''
});

// 打开审批对话框
const openApproveDialog = (row: any) => {
  currentMeeting.MeetProcessId = row.MeetProcessId;
  currentMeeting.AppointmentsName = row.AppointmentsName;
  currentMeeting.MeetMain = row.MeetMain;
  currentMeeting.MeetPeople = row.MeetPeople;
  currentMeeting.CreateTime = row.CreateTime;
  currentMeeting.StartTime = row.StartTime;
  currentMeeting.EndTime = row.EndTime;
  dialogApproveVisible.value = true;
}

// 审批处理
const approveProcess = async (id: number, status: number) => {
  const statusText = status === 11 ? '通过' : '驳回';

    // 调用审批API
    const res = await ApproveMeetProcess({ 
      MeetProcessId: id, 
      Status: status 
    }) as unknown as ApiResponse;
    
    if (res.code == 200) {
      ElMessage.success(`会议审批${statusText}成功`);
      dialogApproveVisible.value = false;
      getMeetProcessList();
    } else {
      ElMessage.error(res.msg);
    }
}
</script>

<style scoped>
.el-pagination {
  margin-top: 20px;
  justify-content: center;
}

.approve-dialog-content {
  padding: 10px;
}

.approve-dialog-content p {
  margin: 10px 0;
  font-size: 14px;
}
</style>
